import {
    Scene,
    PerspectiveCamera,
    AxesHelper,
    AmbientLight,
    WebGLRenderer,
    GridHelper,
} from "three";
import { meshGeometry } from "./5.1.js";
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//引入性能监视器stats.js
import Stats from "three/addons/libs/stats.module.js";
const _stats = new Stats();
document.body.appendChild(_stats.domElement);
// 创建场景
const scene = new Scene();
const Width = window.innerWidth;
const Height = window.innerHeight;
scene.add(meshGeometry);

// 创建一个透视投影相机
const camera = new PerspectiveCamera(30, Width / Height, 1, 8000);
camera.position.set(200, 200, 200);
// 设置相机对准的坐标原点
camera.lookAt(meshGeometry.position);
const axesHelper = new AxesHelper(1050);
scene.add(axesHelper);
// 环境光 没有特定方向改变整体场景的光照明暗
const ambient = new AmbientLight(0xffffff, 1);
scene.add(ambient);
// 添加一个辅助网格地面
const gridHelper = new GridHelper(300, 25, 0x004444, 0x004444);
scene.add(gridHelper);
// 创建渲染器对象
const renderer = new WebGLRenderer();
// 初始化渲染器参数
renderer.setSize(Width, Height);
renderer.setClearColor(0x87ceeb, 1);
// 设置相机轨道控制器 OrbitControls
const contorols = new OrbitControls(camera, renderer.domElement);
contorols.addEventListener("change", () => {
    _stats.update();
    renderer.render(scene, camera); // 执行渲染函数
}); // 监听鼠标键盘事件
renderer.render(scene, camera); // 执行渲染函数
document.body.appendChild(renderer.domElement);
// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};

// 对应2.7.js
// document.body.addEventListener("keydown", event => {
//     console.log(event.keyCode);
//     if (event.keyCode == 73) {
//         // 放大 / 旋转
//         geometry.scale(-0.5, 0.5, 1.5);
//         // geometry.rotateX(Math.PI / 10);
//     } else if (event.keyCode == 85) {
//         // 缩小 /  旋转
//         // geometry.scale(1, 1, 1);
//         geometry.rotateY(Math.PI / 4);
//     }
//     _stats.update();
//     renderer.render(scene, camera); // 执行渲染函数
// });

// 对应4.2.js
// document.body.addEventListener("keydown", event => {
//     console.log(event.keyCode);
//     // w 87 d 68 a 65 s 83
//     switch (event.keyCode) {
//         case 87:
//             meshGeometry.getObjectByName("4号楼").translateZ(1);
//             break;
//         case 83:
//             meshGeometry.translateZ(-1);
//             break;
//         case 68:
//             meshGeometry.translateX(-1);
//             break;
//         case 65:
//             meshGeometry.translateX(1);
//             break;
//     }
//     if (event.keyCode == 8) {
//         console.log(meshGeometry.children[1].children);
//         // 只能使用父级的方法删除子集 不可以跨越层级
//         meshGeometry.children[1].remove(meshGeometry.children[1].children[0]);
//     }
//     模型的显示和隐藏
//     if (event.keyCode == 32) {
//         meshGeometry.children[1].visible = !meshGeometry.children[1].visible;
//     }
//     _stats.update();
//     renderer.render(scene, camera); // 执行渲染函数
// });

// 对应 5.5
// function textureRender() {
//     texture.offset.x += 0.001;
//     // texture.offset.y += 0.01;
//     renderer.render(scene, camera);
//     requestAnimationFrame(textureRender);
// }

// textureRender();
